import { Card, SwipeAction } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I006 from '../../icons/I006.svg?react';
import { toCurrency } from "@/utils/funs";
import { Flex } from "@/components/base";
import { Button } from "@/components/base";
import React from "react";

const { Text } = Typography;

/** 折扣 */
export function Discount() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px', color: '#00a63e' }}>
                    <Icon component={I006} style={{ marginRight: 6 }} />
                    折扣
                </Text>
                <Button size="small">增加</Button>
            </Flex>
            <Flex vertical gap={16}>
                <DiscountCard />
                <DiscountCard />
            </Flex>
            <Flex justify='space-between' style={{ marginTop: 16 }}>
                <Text size={12} style={{ color: '#016630' }}>合计：{toCurrency(200)}</Text>
            </Flex>
        </Card>
    )
}

/** 折扣卡片 */
function DiscountCard() {

    /** 删除 */
    const deleteAction = React.useCallback(() => {
        console.log('删除');
    }, []);

    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '修改', key: 'delete1', color: 'var(--adm-color-primary)' },
                { text: '删除', key: 'delete', color: 'red', onClick: deleteAction }
            ]}
        >
            <Flex vertical>
                <Text size={16} style={{ color: '#016630' }}>{toCurrency(100)}</Text>
                <Text size={12} style={{ color: '#00a63e' }}>折扣原因折扣原因折扣原因</Text>
            </Flex>
        </SwipeAction>
    )
}